<template>
  <div class="login" ref="div" :style="{height:setWindowHeight + 'px'}">
    <top-nav :curpages="5"></top-nav>
    <div class="login-banner" ref="bannerimg">
      <img src="../../assets/modifyPw/modify-banner.jpg" alt="">
      <div class="to-login">
        <h2>修改密码</h2>
        <div class="tips">
          <span class="tips-content" v-if="isTips">{{tipsContent}}</span>
        </div>
        <div class="form-list">
          <icon name="unlock" scale="1.8" style="vertical-align: middle;margin-top: 5px"></icon>
          <input type="text" placeholder="输入原密码" v-model="originPaw">

        </div>
        <div class="form-list">
          <icon name="lock" scale="2" style="vertical-align: middle;margin-top: 3px"></icon>
          <input type="password" placeholder="输入新密码" v-model="newPaw">

        </div>
        <div class="form-list">
          <icon name="lock" scale="2" style="vertical-align: middle;margin-top: 3px"></icon>
          <input type="password" placeholder="确认新密码" v-model="reNewPaw">

        </div>

        <div class="login-now">
          <button @click="toSave">保存修改</button>
        </div>
      </div>
    </div>
    <div class="introduce" :style="{height:introduceH +'px'}">
      <div class="inner">
        <div class="ii-left">
          <div class="iil-each">
            <h3>关于我们</h3>
            <a>企业简介</a>
            <a>组织架构</a>
            <a>安全保障</a>
          </div>
          <div class="iil-each">
            <h3>新闻中心</h3>
            <a>企业新闻</a>
            <a>业界动态</a>
          </div>
          <div class="iil-each">
            <h3>投资咨询</h3>
            <a>网约车投资</a>
            <a>债权投资</a>
            <a>股权投资</a>
            <a>国内与海外保险与资产配置</a>
          </div>
        </div>
        <div class="middle-line"></div>
        <div class="ii-right">
          <div class="iir-code">
            <img src="../../assets/login/code.jpg" alt="">
            <p>扫一扫 关注我们</p>

          </div>
          <div class="concat-us">
            <h2>联系我们</h2>
            <p>
              <icon class="wordicon" name="phone-square" scale="1.7"></icon>
              服务热线:4000-667-222
            </p>
            <p>
              <icon class="wordicon" name="location-arrow" scale="1.7"></icon>
              总部地址:南京市秦淮区常府街29-7号
            </p>
          </div>
        </div>
      </div>
    </div>

    <div class="login-bottom" ref="bottomh">
      <p>版权所有 江苏汇瑞德资产管理有限公司</p>
      <p>苏ICP备17064915号-1</p>
    </div>
  </div>

</template>

<script>
  import topNav from '../topNav/topnav'
  import 'vue-awesome/icons'
  import Icon from 'vue-awesome/components/Icon'
  import {mapState, mapActions} from 'vuex'
  import api from '@/utils/api'
  import swal from 'sweetalert2'

  export default {
    name: "modifyPw",
    components: {
      Icon,
      topNav,

    },
    data() {
      return {
        isbool: false,
        introduceH: 0,
        originPaw: '',
        newPaw: '',
        reNewPaw: '',
        tipsContent: '',
        isTips: false
      }
    },
    computed: {
      setWindowHeight() {
        let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
        return h
      },

    },
    methods: {
      toSave() {
        var id = localStorage.getItem('userinfo') ? JSON.parse(localStorage.getItem('userinfo')).id : '';
        this.$store.dispatch('Post', {
          url: api.modifyPaw,
          data: {
            custId: id,
            oldPassword: this.originPaw,
            newPassword: this.newPaw
          },
          showstatus: true
        }).then((res) => {

          if (!this.originPaw) {
            this.isTips = true;
            this.tipsContent = '请输入初始密码!!!';
            return
          }
          if (!this.newPaw) {
            this.isTips = true;
            this.tipsContent = '请输入新密码!!!';
            return
          }
          if (!this.reNewPaw) {
            this.isTips = true;
            this.tipsContent = '请确认新密码!!!';
            return
          }

          if (res.data.code) {
            this.isTips = true;
            this.tipsContent = res.data.message;
          } else {
            swal({
              title: "恭喜修改密码成功，请重新登录!!!",
              timer: 2000,
              showConfirmButton: false
            }).then((result) => {
              this.$router.push("login")
            });

          }
        })
      }
    },
    mounted() {


    }
  }
</script>
<style scoped lang="scss">
  .login {
    width: 100%;
    min-width: 1210px;
    height: 100%;
    background-color: #313131;
  }

  .login-top img {
    width: 100%;
    min-width: 1210px;
    height: auto;
    display: block;
  }

  .login-banner {
    position: relative;

  }

  .login-banner img {
    width: 100%;
    min-width: 1210px;
    height: auto;
    display: block;
  }

  .login-bottom {
    width: 100%;
    background-color: #b9963f;
    overflow: hidden;
    position: fixed;
    bottom: 0;
    left: 0;
    p {
      color: #ffffff;
      font-size: 16px;
      text-align: center;
      width: 100%;
      margin: 10px 0;
    }
  }

  .introduce {
    width: 100%;
    min-width: 1210px;

    .inner {
      width: 1200px;
      margin: 0 auto;
      overflow: hidden;
      .middle-line {
        width: 2px;
        height: 158px;
        background-color: #5e5e5e;
        float: left;
        margin-top: 50px;
      }
      .ii-left {
        width: 630px;
        float: left;
        .iil-each {
          display: inline-block;
          margin: 50px 45px 0;
          vertical-align: top;

          h3 {
            width: 100%;
            text-align: center;
            font-size: 20px;
            color: #ffffff;
            margin-bottom: 20px;
          }
          a {
            width: 100%;
            text-align: center;
            font-size: 14px;
            color: #7b7b7b;
            display: block;
            margin: 10px 0;

          }
        }
      }
      .ii-right {
        width: 568px;
        float: left;
        .iir-code {
          margin: 60px 0 0 78px;
          width: 90px;
          float: left;
          p {
            font-size: 12px;
            color: #7b7b7b;
            margin-top: 8px;
          }

        }
        .concat-us {
          float: left;
          margin-left: 55px;
          margin-top: 60px;
          h2 {
            color: #ffffff;
            text-align: left;
            margin-bottom: 20px;
          }
          p {
            color: #7b7b7b;
            text-align: left;
            vertical-align: middle;
            /*line-height: 34px;*/
            margin-top: 8px;
            .wordicon {
              vertical-align: middle;
              margin-right: 15px;
            }
          }
        }
      }
    }
  }

  .button {
    width: 50px;
    height: 30px;

  }

  .to-login {
    width: 378px;
    height: 305px;
    background-color: #ffffff;
    position: absolute;
    top: 50%;
    right: 10%;
    margin-top: -152px;
    .tips {
      width: 295px;
      font-size: 12px;
      font-weight: 600;
      text-align: left;
      margin: 5px auto 10px;
      /*float: left;*/
      span {

      }
    }
    h2 {
      font-size: 20px;
      color: #5f5e5e;
      margin: 20px 0 10px;
    }
    .form-list {
      width: 295px;
      height: 40px;
      border: 1px solid #818081;
      border-radius: 4px;
      margin: 0 auto 15px;
      input {
        width: 250px;
        height: 38px;
        border: none;
        vertical-align: top;
        text-indent: 10px;
        font-size: 14px;
      }
      icon {
        margin-left: 10px;
      }
    }
    .forget-passwd {
      text-indent: 250px;
      color: #5f5e5e;
      font-size: 12px;
      margin-top: 20px;
    }
    .login-now {
      width: 250px;
      height: 40px;
      margin: 20px auto 0;
      border-radius: 6px;
      button {
        width: 250px;
        height: 40px;
        background-color: #c12b2b;
        color: #ffffff;
        font-size: 18px;
        border-radius: 6px;
        cursor: pointer;
      }
    }
  }

</style>
